<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 顶部导航栏 -->
        <Header />
        <!-- 左侧导航栏 -->
        <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
            <nav class="py-4">
                <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
                    <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
                        :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
                        <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
                        <span>{{ menu.name }}</span>
                        <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
                            :class="{ 'transform rotate-180': menu.expanded }"></i>
                    </div>
                    <div v-if="menu.expanded" class="bg-gray-900">
                        <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
                            class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
                            :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
                            <a v-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm w-full">{{
                                submenu.name }}</a>
                            <span v-else class="text-sm">{{ submenu.name }}</span>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>
        <!-- 主内容区域 -->
        <main class="pt-16 pl-64">
            <div class="container mx-auto p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm mb-4 text-gray-500">
                    <span>首页</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>系统管理</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-blue-600">系统监控与维护</span>
                </div>
                <!-- 系统状态概览卡片 -->
                <div class="grid grid-cols-4 gap-4 mb-6">
                    <!-- 系统健康状态卡片 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
                            <i class="fas fa-heartbeat text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">系统健康状态</div>
                            <div class="text-2xl font-bold text-gray-900">良好</div>
                            <div class="text-xs text-green-600 flex items-center">
                                <i class="fas fa-check-circle mr-1"></i> 所有服务正常运行
                            </div>
                        </div>
                    </div>
                    <!-- CPU使用率卡片 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                            <i class="fas fa-microchip text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">CPU 使用率</div>
                            <div class="text-2xl font-bold text-gray-900">42%</div>
                            <div class="text-xs text-blue-600 flex items-center">
                                <i class="fas fa-arrow-down mr-1"></i> 较昨日下降 5%
                            </div>
                        </div>
                    </div>
                    <!-- 内存使用率卡片 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
                            <i class="fas fa-memory text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">内存使用率</div>
                            <div class="text-2xl font-bold text-gray-900">65%</div>
                            <div class="text-xs text-yellow-600 flex items-center">
                                <i class="fas fa-arrow-up mr-1"></i> 较昨日上升 3%
                            </div>
                        </div>
                    </div>
                    <!-- 磁盘使用率卡片 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4">
                            <i class="fas fa-hdd text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">磁盘使用率</div>
                            <div class="text-2xl font-bold text-gray-900">78%</div>
                            <div class="text-xs text-red-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i> 接近警戒值 (80%)
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 服务器性能监控 -->
                <div class="grid grid-cols-2 gap-6 mb-6">
                    <!-- CPU负载趋势图 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">CPU 负载趋势</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.cpu === 'today' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('cpu', 'today')">
                                    今日
                                </button>
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.cpu === 'week' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('cpu', 'week')">
                                    本周
                                </button>
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.cpu === 'month' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('cpu', 'month')">
                                    本月
                                </button>
                            </div>
                        </div>
                        <div ref="cpuChart" class="h-64"></div>
                    </div>
                    <!-- 内存使用趋势图 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">内存使用趋势</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.memory === 'today' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('memory', 'today')">
                                    今日
                                </button>
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.memory === 'week' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('memory', 'week')">
                                    本周
                                </button>
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.memory === 'month' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('memory', 'month')">
                                    本月
                                </button>
                            </div>
                        </div>
                        <div ref="memoryChart" class="h-64"></div>
                    </div>
                    <!-- 网络流量监控 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">网络流量监控</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.network === 'realtime' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('network', 'realtime')">
                                    实时
                                </button>
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.network === 'today' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('network', 'today')">
                                    今日
                                </button>
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.network === 'week' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('network', 'week')">
                                    本周
                                </button>
                            </div>
                        </div>
                        <div ref="networkChart" class="h-64"></div>
                    </div>
                    <!-- 磁盘IO监控 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">磁盘 IO 监控</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.diskIO === 'realtime' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('diskIO', 'realtime')">
                                    实时
                                </button>
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.diskIO === 'today' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('diskIO', 'today')">
                                    今日
                                </button>
                                <button class="px-3 py-1 text-xs rounded whitespace-nowrap cursor-pointer"
                                    :class="chartTimeRange.diskIO === 'week' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
                                    @click="changeChartTimeRange('diskIO', 'week')">
                                    本周
                                </button>
                            </div>
                        </div>
                        <div ref="diskIOChart" class="h-64"></div>
                    </div>
                </div>
                <!-- 数据库监控和应用性能监控 -->
                <div class="grid grid-cols-2 gap-6 mb-6">
                    <!-- 数据库监控 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">数据库监控</h3>
                        </div>
                        <!-- 指标卡片区域 -->
                        <div class="grid grid-cols-2 gap-4 mb-4">
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-sm text-gray-500 mb-1">连接池状态</div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xl font-medium text-gray-900">42 / 100</div>
                                    <div class="text-xs text-green-600">正常</div>
                                </div>
                                <div class="text-xs text-gray-500">活动连接 / 最大连接</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-sm text-gray-500 mb-1">SQL 执行统计</div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xl font-medium text-gray-900">156 / 秒</div>
                                    <div class="text-xs text-green-600">正常</div>
                                </div>
                                <div class="text-xs text-gray-500">查询响应时间: 45ms</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-sm text-gray-500 mb-1">慢查询数</div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xl font-medium text-gray-900">3</div>
                                    <div class="text-xs text-yellow-600">注意</div>
                                </div>
                                <div class="text-xs text-gray-500">阈值: >500ms</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-sm text-gray-500 mb-1">表空间使用率</div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xl font-medium text-gray-900">68%</div>
                                    <div class="text-xs text-green-600">正常</div>
                                </div>
                                <div class="text-xs text-gray-500">剩余: 32GB</div>
                            </div>
                        </div>
                        <!-- 图表区域 - 单独占一行 -->
                        <div class="mt-4">
                            <div ref="dbPerformanceChart" class="h-64"></div>
                        </div>
                    </div>
                    <!-- 应用性能监控 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">应用性能监控</h3>
                        </div>
                        <!-- 指标卡片区域 -->
                        <div class="grid grid-cols-2 gap-4 mb-4">
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-sm text-gray-500 mb-1">平均响应时间</div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xl font-medium text-gray-900">125 ms</div>
                                    <div class="text-xs text-green-600">正常</div>
                                </div>
                                <div class="text-xs text-gray-500">较昨日: -15ms</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-sm text-gray-500 mb-1">并发访问量</div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xl font-medium text-gray-900">256</div>
                                    <div class="text-xs text-green-600">正常</div>
                                </div>
                                <div class="text-xs text-gray-500">峰值: 512</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-sm text-gray-500 mb-1">错误率</div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xl font-medium text-gray-900">0.5%</div>
                                    <div class="text-xs text-green-600">正常</div>
                                </div>
                                <div class="text-xs text-gray-500">阈值: 2%</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-sm text-gray-500 mb-1">JVM 内存使用</div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xl font-medium text-gray-900">4.2 GB</div>
                                    <div class="text-xs text-green-600">正常</div>
                                </div>
                                <div class="text-xs text-gray-500">最大: 8GB</div>
                            </div>
                        </div>
                        <!-- 图表区域 - 单独占一行 -->
                        <div class="mt-4">
                            <div ref="appPerformanceChart" class="h-64"></div>
                        </div>
                    </div>
                    <!-- 系统日志 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">系统日志</h3>
                            <div class="flex space-x-2">
                                <div class="relative">
                                    <input type="text" v-model="logSearchKeyword" placeholder="搜索日志内容"
                                        class="w-64 pl-10 pr-4 py-2 bg-gray-100 border-none rounded-lg text-sm focus:outline-none" />
                                    <i
                                        class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
                                </div>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead>
                                    <tr>
                                        <th
                                            class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            时间</th>
                                        <th
                                            class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            级别</th>
                                        <th
                                            class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            来源</th>
                                        <th
                                            class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            内容</th>
                                        <th
                                            class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            操作</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr v-for="(log, index) in paginatedLogs" :key="index" class="hover:bg-gray-50">
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="text-sm text-gray-900 justify-center">{{ log.time }}</div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div :class="getLogLevelClass(log.level)">
                                                {{ log.level }}
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="text-sm text-gray-900 justify-center">{{ log.source }}</div>
                                        </td>
                                        <td class="px-4 py-3">
                                            <div class="text-sm text-gray-900 truncate max-w-md justify-center">{{
                                                log.content }}
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <button
                                                class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer justify-center"
                                                @click="viewLogDetail(log)">
                                                详情
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- 分页 -->
                            <div class="flex justify-end items-center mt-4 px-4 py-3 text-xs">
                                <Pagination :current-page="logCurrentPage" :page-size="logPageSize"
                                    :total="filteredLogs.length" :page-sizes="logPageSizes" @page-change="changeLogPage"
                                    @page-size-change="changeLogPageSize" />
                            </div>
                        </div>
                    </div>
                    <!-- 告警信息 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">告警信息</h3>
                            <button
                                class="px-3 py-1 bg-blue-600 text-white rounded text-sm !rounded-button whitespace-nowrap cursor-pointer hover:bg-blue-700 transition-colors"
                                @click="showAllAlerts">
                                查看全部
                            </button>
                        </div>
                        <div class="bg-red-50 p-3 rounded-lg mb-3">
                            <div class="flex items-center text-red-600 mb-1">
                                <i class="fas fa-exclamation-circle mr-2"></i>
                                <span class="font-medium">严重</span>
                                <span class="text-xs text-gray-500 ml-auto">10分钟前</span>
                            </div>
                            <div class="text-sm text-gray-700">磁盘空间不足，服务器 SRV-DB02 磁盘使用率达到 92%</div>
                        </div>
                        <div class="bg-yellow-50 p-3 rounded-lg mb-3">
                            <div class="flex items-center text-yellow-600 mb-1">
                                <i class="fas fa-exclamation-triangle mr-2"></i>
                                <span class="font-medium">警告</span>
                                <span class="text-xs text-gray-500 ml-auto">25分钟前</span>
                            </div>
                            <div class="text-sm text-gray-700">数据库连接池接近阈值，当前使用率 85%</div>
                        </div>
                        <div class="bg-blue-50 p-3 rounded-lg mb-3">
                            <div class="flex items-center text-blue-600 mb-1">
                                <i class="fas fa-info-circle mr-2"></i>
                                <span class="font-medium">信息</span>
                                <span class="text-xs text-gray-500 ml-auto">1小时前</span>
                            </div>
                            <div class="text-sm text-gray-700">系统自动备份完成，备份大小 2.5GB</div>
                        </div>
                        <div class="bg-green-50 p-3 rounded-lg">
                            <div class="flex items-center text-green-600 mb-1">
                                <i class="fas fa-check-circle mr-2"></i>
                                <span class="font-medium">恢复</span>
                                <span class="text-xs text-gray-500 ml-auto">2小时前</span>
                            </div>
                            <div class="text-sm text-gray-700">应用服务器 APP-01 已恢复正常运行</div>
                        </div>
                    </div>

                </div>
            </div>
        </main>
        <!-- 日志详情弹窗 -->
        <div v-if="showLogDetailModal"
            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg p-6 w-[800px] max-h-[90vh] overflow-y-auto">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-gray-800">日志详情</h3>
                    <button @click="showLogDetailModal = false"
                        class="text-gray-500 hover:text-gray-700 cursor-pointer">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="bg-gray-100 p-4 rounded-lg mb-4">
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <div class="text-sm text-gray-500">时间</div>
                            <div class="text-sm font-medium text-gray-900">{{ currentLog.time }}</div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">级别</div>
                            <div :class="getLogLevelClass(currentLog.level)">
                                {{ currentLog.level }}
                            </div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">来源</div>
                            <div class="text-sm font-medium text-gray-900">{{ currentLog.source }}</div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">线程</div>
                            <div class="text-sm font-medium text-gray-900">{{ currentLog.thread || 'main-thread-1' }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-4">
                    <h4 class="text-md font-medium text-gray-800 mb-2">日志内容</h4>
                    <div class="bg-gray-100 p-4 rounded-lg">
                        <pre class="text-sm text-gray-700 whitespace-pre-wrap">{{ currentLog.content }}</pre>
                    </div>
                </div>
                <div v-if="currentLog.stackTrace" class="mb-4">
                    <h4 class="text-md font-medium text-gray-800 mb-2">堆栈跟踪</h4>
                    <div class="bg-gray-100 p-4 rounded-lg">
                        <pre class="text-sm text-gray-700 whitespace-pre-wrap">{{ currentLog.stackTrace }}</pre>
                    </div>
                </div>
                <div class="flex justify-end space-x-3">
                    <button @click="showLogDetailModal = false"
                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg !rounded-button whitespace-nowrap cursor-pointer">
                        关闭
                    </button>
                    <button
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg !rounded-button whitespace-nowrap cursor-pointer hover:bg-blue-700 transition-colors"
                        @click="exportLogs">
                        导出日志
                    </button>
                </div>
            </div>
        </div>
        <!-- 查看全部告警弹窗 -->
        <div v-if="showAllAlertsModal"
            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg p-6 w-[1000px] max-h-[90vh] overflow-y-auto">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-bold text-gray-800">全部告警信息</h3>
                    <button @click="showAllAlertsModal = false"
                        class="text-gray-500 hover:text-gray-700 cursor-pointer transition-colors">
                        <i class="fas fa-times text-lg"></i>
                    </button>
                </div>

                <!-- 告警筛选和统计 -->
                <div class="flex justify-end items-center mb-4">
                    <div class="text-sm text-gray-500">
                        共 {{ allAlerts.length }} 条告警记录
                    </div>
                </div>

                <!-- 告警列表 -->
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th
                                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">
                                    级别
                                </th>
                                <th
                                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider  text-left">
                                    服务器
                                </th>
                                <th
                                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider  text-left">
                                    监控指标
                                </th>
                                <th
                                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider  text-left">
                                    当前值
                                </th>
                                <th
                                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider  text-left">
                                    阈值
                                </th>
                                <th
                                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider  text-left">
                                    时间
                                </th>
                                <th
                                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider  text-left">
                                    状态
                                </th>
                                <th
                                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider ">
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr v-for="alert in allAlerts" :key="alert.id" class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div :class="getAlertLevelClass(alert.level)">
                                        <i :class="getAlertLevelIcon(alert.level)" class="mr-1"></i>
                                        {{ alert.level }}
                                    </div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900 justify-center">{{ alert.server }}
                                    </div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="text-sm text-gray-900 justify-center">{{ alert.metric }}</div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="text-sm font-medium justify-center"
                                        :class="getAlertValueClass(alert.level)">{{
                                            alert.value }}</div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="text-sm text-gray-500 justify-center">{{ alert.threshold }}</div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="text-sm text-gray-500 justify-center">{{ alert.time }}</div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div :class="getAlertStatusClass(alert.status)">
                                        {{ alert.status }}
                                    </div>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="flex space-x-2 justify-center">
                                        <button
                                            class="px-3 py-1 bg-blue-100 text-blue-600 rounded text-xs !rounded-button whitespace-nowrap cursor-pointer hover:bg-blue-200 transition-colors"
                                            @click="handleAlert(alert)">
                                            处理
                                        </button>
                                        <button
                                            class="px-3 py-1 bg-gray-100 text-gray-600 rounded text-xs !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200 transition-colors"
                                            @click="viewAlertDetail(alert)">
                                            详情
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="flex justify-end space-x-3 mt-6">
                    <button @click="showAllAlertsModal = false"
                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200 transition-colors">
                        关闭
                    </button>
                    <button
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg !rounded-button whitespace-nowrap cursor-pointer hover:bg-blue-700 transition-colors"
                        @click="exportAlerts">
                        导出告警
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import Header from "../components/Header.vue";
import Pagination from "../components/Pagination.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
export default {
    components: {
        Header,
        Pagination
    },
    data() {
        return {
            // 新增日志分页和搜索相关数据
            logSearchKeyword: '',
            logCurrentPage: 1,
            logPageSize: 5,
            logPageSizes: [5, 8],
            showLogDetailModal: false,
            currentLog: {},
            mainMenus: [
                {
                    name: '监测报警',
                    icon: 'fas fa-bell',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
                        { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
                        { name: '区域化展示', active: false, link: '/regional-display' }
                    ]
                },
                {
                    name: '风险研判',
                    icon: 'fas fa-exclamation-triangle',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: true, link: '/risk-analysis' },
                    ]
                },
                {
                    name: '在线巡查',
                    icon: 'fas fa-search',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '企业信息汇总', active: false, link: '/summary-information' },
                        { name: '巡查功能', active: false, link: '/patrol' },
                        { name: '检索功能', active: false, link: 'search' },
                        { name: '一屏汇聚展示', active: false, link: '/screen-display' }
                    ]
                },
                {
                    name: '综合分析',
                    icon: 'fas fa-chart-line',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '联网与设备分析', active: false, link: '/equipment' },
                        { name: '应用情况分析', active: false, link: '/application' },
                        { name: '数据质量分析', active: false, link: '/data-quality' },
                        { name: '定期专题报告', active: false, link: 'report' }
                    ]
                },
                {
                    name: '系统管理',
                    icon: 'fas fa-cog',
                    expanded: true,
                    active: true,
                    subMenus: [
                        { name: '用户权限管理', active: false, link: 'user-permission' },
                        { name: '系统配置管理', active: false, link: 'system-manage' },
                        { name: '数据管理', active: false, link: 'data-manage' },
                        { name: '系统监控与维护', active: true, link: 'monitoring' }
                    ]
                }
            ],
            systemLogs: [
                {
                    time: '2025-07-08 11:42:15',
                    level: 'ERROR',
                    source: 'DatabaseService',
                    content: '数据库连接超时，无法执行查询操作。连接地址: jdbc:mysql://prod-db.example.com:3306/safety',
                    stackTrace: 'java.sql.SQLException: Connection timed out\n  at com.mysql.jdbc.Connection.createNewIO(Connection.java:2847)\n  at com.mysql.jdbc.Connection.<init>(Connection.java:1555)\n  at com.mysql.jdbc.NonRegisteringDriver.connect(NonRegisteringDriver.java:285)\n  at java.sql.DriverManager.getConnection(DriverManager.java:664)\n  at java.sql.DriverManager.getConnection(DriverManager.java:247)\n  at com.example.safety.db.DatabaseService.executeQuery(DatabaseService.java:156)'
                },
                {
                    time: '2025-07-08 11:35:22',
                    level: 'WARN',
                    source: 'MemoryMonitor',
                    content: '系统内存使用率超过警戒值，当前使用率: 85%，警戒值: 80%'
                },
                {
                    time: '2025-07-08 11:30:05',
                    level: 'INFO',
                    source: 'UserService',
                    content: '用户 admin 登录系统，IP地址: 192.168.1.105'
                },
                {
                    time: '2025-07-08 11:25:18',
                    level: 'INFO',
                    source: 'BackupService',
                    content: '系统自动备份开始执行，备份目标: 全量数据库'
                },
                {
                    time: '2025-07-08 11:20:33',
                    level: 'DEBUG',
                    source: 'ApiService',
                    content: '接收到API请求: GET /api/v1/system/status，参数: {detail: full}'
                },
                {
                    time: '2025-07-08 11:15:42',
                    level: 'INFO',
                    source: 'ConfigService',
                    content: '系统配置已更新，更新项: max_connections=200'
                },
                {
                    time: '2025-07-08 11:10:15',
                    level: 'WARN',
                    source: 'DiskMonitor',
                    content: '磁盘空间不足，服务器 SRV-DB02 磁盘使用率达到 92%，剩余空间: 24GB'
                },
                {
                    time: '2025-07-08 11:05:03',
                    level: 'ERROR',
                    source: 'ApplicationService',
                    content: '应用服务启动失败，端口 8080 已被占用',
                    stackTrace: 'java.net.BindException: Address already in use: bind\n  at sun.nio.ch.Net.bind0(Native Method)\n  at sun.nio.ch.Net.bind(Net.java:433)\n  at sun.nio.ch.Net.bind(Net.java:425)\n  at sun.nio.ch.ServerSocketChannelImpl.bind(ServerSocketChannelImpl.java:223)\n  at io.netty.channel.socket.nio.NioServerSocketChannel.doBind(NioServerSocketChannel.java:134)\n  at io.netty.channel.AbstractChannel$AbstractUnsafe.bind(AbstractChannel.java:562)'
                }
            ],
            // 图表时间范围数据
            chartTimeRange: {
                cpu: 'week',
                memory: 'week',
                network: 'today',
                diskIO: 'today'
            },
            // 图表数据
            chartData: {
                cpu: {
                    today: {
                        x: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
                        y: [25, 30, 28, 35, 42, 48, 40, 35]
                    },
                    week: {
                        x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        y: [35, 42, 38, 45, 52, 48, 40]
                    },
                    month: {
                        x: ['第1周', '第2周', '第3周', '第4周'],
                        y: [38, 42, 45, 40]
                    }
                },
                memory: {
                    today: {
                        x: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
                        y: [45, 48, 52, 58, 65, 62, 60, 58]
                    },
                    week: {
                        x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        y: [55, 58, 62, 65, 68, 62, 58]
                    },
                    month: {
                        x: ['第1周', '第2周', '第3周', '第4周'],
                        y: [52, 58, 62, 60]
                    }
                },
                network: {
                    realtime: {
                        x: ['11:25', '11:26', '11:27', '11:28', '11:29', '11:30'],
                        in: [6.2, 5.8, 6.5, 5.9, 6.3, 6.1],
                        out: [4.8, 4.5, 5.2, 4.7, 4.9, 5.1]
                    },
                    today: {
                        x: ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30'],
                        in: [2.5, 3.2, 4.5, 6.8, 5.2, 4.8, 5.6, 6.2],
                        out: [1.8, 2.1, 3.2, 5.4, 4.2, 3.5, 4.2, 4.8]
                    },
                    week: {
                        x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        in: [4.2, 4.8, 5.6, 6.2, 5.8, 4.5, 3.8],
                        out: [3.2, 3.8, 4.5, 5.2, 4.8, 3.2, 2.8]
                    }
                },
                diskIO: {
                    realtime: {
                        x: ['11:25', '11:26', '11:27', '11:28', '11:29', '11:30'],
                        read: [62, 58, 65, 59, 63, 61],
                        write: [45, 42, 48, 43, 46, 44]
                    },
                    today: {
                        x: ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30'],
                        read: [35, 42, 58, 75, 68, 52, 48, 62],
                        write: [28, 35, 42, 56, 48, 38, 32, 45]
                    },
                    week: {
                        x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        read: [45, 52, 58, 65, 62, 48, 42],
                        write: [35, 42, 48, 52, 48, 35, 28]
                    }
                }
            },
            // 新增告警相关数据
            showAllAlertsModal: false,
            allAlerts: [
                {
                    id: 1,
                    level: '严重',
                    time: '10分钟前',
                    title: '磁盘空间不足',
                    content: '服务器 SRV-DB02 磁盘使用率达到 92%',
                    status: '未处理',
                    server: 'SRV-DB02',
                    metric: '磁盘使用率',
                    value: '92%',
                    threshold: '80%'
                },
                {
                    id: 2,
                    level: '警告',
                    time: '25分钟前',
                    title: '数据库连接池接近阈值',
                    content: '数据库连接池接近阈值，当前使用率 85%',
                    status: '未处理',
                    server: '主数据库',
                    metric: '连接池使用率',
                    value: '85%',
                    threshold: '90%'
                },
                {
                    id: 3,
                    level: '信息',
                    time: '1小时前',
                    title: '系统自动备份完成',
                    content: '系统自动备份完成，备份大小 2.5GB',
                    status: '已处理',
                    server: '备份服务器',
                    metric: '备份状态',
                    value: '完成',
                    threshold: '-'
                },
                {
                    id: 4,
                    level: '恢复',
                    time: '2小时前',
                    title: '应用服务器恢复正常',
                    content: '应用服务器 APP-01 已恢复正常运行',
                    status: '已恢复',
                    server: 'APP-01',
                    metric: '服务状态',
                    value: '正常',
                    threshold: '-'
                },
                {
                    id: 5,
                    level: '严重',
                    time: '3小时前',
                    title: 'CPU使用率过高',
                    content: '服务器 SRV-WEB01 CPU使用率达到 95%',
                    status: '处理中',
                    server: 'SRV-WEB01',
                    metric: 'CPU使用率',
                    value: '95%',
                    threshold: '90%'
                },
                {
                    id: 6,
                    level: '警告',
                    time: '4小时前',
                    title: '内存使用率警告',
                    content: '服务器 SRV-CACHE01 内存使用率达到 88%',
                    status: '未处理',
                    server: 'SRV-CACHE01',
                    metric: '内存使用率',
                    value: '88%',
                    threshold: '85%'
                }
            ]
        };
    },
    mounted() {
        this.initCharts();
    },
    computed: {
        filteredLogs() {
            if (!this.logSearchKeyword) {
                return this.systemLogs;
            }

            const keyword = this.logSearchKeyword.toLowerCase();
            return this.systemLogs.filter(log =>
                log.content.toLowerCase().includes(keyword) ||
                log.source.toLowerCase().includes(keyword) ||
                log.level.toLowerCase().includes(keyword) ||
                log.time.toLowerCase().includes(keyword)
            );
        },
        paginatedLogs() {
            const start = (this.logCurrentPage - 1) * this.logPageSize;
            const end = start + this.logPageSize;
            return this.filteredLogs.slice(start, end);
        }
    },
    mounted() {
        this.initCharts();
    },

    methods: {
        // 统一的时间范围切换方法
        changeChartTimeRange(chartType, range) {
            this.chartTimeRange[chartType] = range;
            this.updateChart(chartType);
        },
        // 日志分页相关方法
        changeLogPage(page) {
            this.logCurrentPage = page;
        },
        changeLogPageSize(size) {
            this.logPageSize = size;
            this.logCurrentPage = 1;
        },
        // 统一的图表更新方法
        updateChart(chartType) {
            const chartRef = `${chartType}Chart`;
            if (!this.$refs[chartRef]) return;

            const chart = echarts.getInstanceByDom(this.$refs[chartRef]);
            if (!chart) return;

            const data = this.chartData[chartType][this.chartTimeRange[chartType]];
            const option = chart.getOption();

            // 更新x轴数据
            option.xAxis[0].data = data.x;

            // 更新系列数据（单系列或多系列）
            if (Array.isArray(data.y)) {
                // 单系列图表（CPU、内存）
                option.series[0].data = data.y;
            } else {
                // 多系列图表（网络、磁盘IO）
                option.series[0].data = data.in || data.read;
                option.series[1].data = data.out || data.write;
            }

            chart.setOption(option);
        },

        // 获取图表基础配置
        getChartBaseOption(chartType) {
            const baseOptions = {
                cpu: {
                    animation: false,
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>{a}: {c}%'
                    },
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100,
                        axisLabel: {
                            formatter: '{value}%'
                        }
                    },
                    series: [{
                        name: 'CPU使用率',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: '#3B82F6'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0, y: 0, x2: 0, y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
                                    { offset: 1, color: 'rgba(59, 130, 246, 0.1)' }
                                ]
                            }
                        }
                    }]
                },
                memory: {
                    animation: false,
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>{a}: {c}%'
                    },
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100,
                        axisLabel: {
                            formatter: '{value}%'
                        }
                    },
                    series: [{
                        name: '内存使用率',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: '#8B5CF6'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0, y: 0, x2: 0, y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(139, 92, 246, 0.3)' },
                                    { offset: 1, color: 'rgba(139, 92, 246, 0.1)' }
                                ]
                            }
                        }
                    }]
                },
                network: {
                    animation: false,
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            let result = params[0].name + '<br/>';
                            params.forEach(param => {
                                result += param.seriesName + ': ' + param.value + ' MB/s<br/>';
                            });
                            return result;
                        }
                    },
                    legend: {
                        data: ['入站流量', '出站流量'],
                        top: '0%', // 图例在顶部
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '15%', // 为图例预留更多空间
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} MB/s'
                        }
                    },
                    series: [
                        {
                            name: '入站流量',
                            type: 'line',
                            smooth: true,
                            lineStyle: {
                                width: 3,
                                color: '#10B981'
                            },
                            symbol: 'circle',
                            symbolSize: 6
                        },
                        {
                            name: '出站流量',
                            type: 'line',
                            smooth: true,
                            lineStyle: {
                                width: 3,
                                color: '#F59E0B'
                            },
                            symbol: 'circle',
                            symbolSize: 6
                        }
                    ]
                },
                diskIO: {
                    animation: false,
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            let result = params[0].name + '<br/>';
                            params.forEach(param => {
                                result += param.seriesName + ': ' + param.value + ' MB/s<br/>';
                            });
                            return result;
                        }
                    },
                    legend: {
                        data: ['读取速率', '写入速率'],
                        top: '0%', // 图例在顶部
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '15%', // 为图例预留更多空间
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} MB/s'
                        }
                    },
                    series: [
                        {
                            name: '读取速率',
                            type: 'line',
                            smooth: true,
                            lineStyle: {
                                width: 3,
                                color: '#3B82F6'
                            },
                            symbol: 'circle',
                            symbolSize: 6
                        },
                        {
                            name: '写入速率',
                            type: 'line',
                            smooth: true,
                            lineStyle: {
                                width: 3,
                                color: '#EC4899'
                            },
                            symbol: 'circle',
                            symbolSize: 6
                        }
                    ]
                }
            };

            return baseOptions[chartType] || {};
        },

        // 初始化单个图表（优化版）
        initSingleChart(chartType) {
            const chart = echarts.init(this.$refs[`${chartType}Chart`]);
            const currentData = this.chartData[chartType][this.chartTimeRange[chartType]];

            const baseOption = this.getChartBaseOption(chartType);
            baseOption.xAxis.data = currentData.x;

            // 设置系列数据
            if (Array.isArray(currentData.y)) {
                // 单系列图表（CPU、内存）
                baseOption.series[0].data = currentData.y;
            } else {
                // 多系列图表（网络、磁盘IO）
                baseOption.series[0].data = currentData.in || currentData.read;
                baseOption.series[1].data = currentData.out || currentData.write;
            }

            chart.setOption(baseOption);

            // 添加窗口大小变化时的自适应
            window.addEventListener('resize', () => {
                chart.resize();
            });
        },

        initCharts() {
            this.$nextTick(() => {
                // 初始化所有图表
                ['cpu', 'memory', 'network', 'diskIO'].forEach(chartType => {
                    if (this.$refs[`${chartType}Chart`]) {
                        this.initSingleChart(chartType);
                    }
                });

                // 初始化其他图表（数据库和应用性能）
                this.initOtherCharts();
            });
        },

        // 初始化其他图表
        initOtherCharts() {
            // 数据库性能图表
            if (this.$refs.dbPerformanceChart) {
                const dbPerformanceChart = echarts.init(this.$refs.dbPerformanceChart);
                const dbPerformanceOption = {
                    animation: false,
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>{a}: {c} 查询/秒'
                    },
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 查询/秒'
                        }
                    },
                    series: [{
                        name: 'SQL执行率',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: '#3B82F6'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0, y: 0, x2: 0, y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
                                    { offset: 1, color: 'rgba(59, 130, 246, 0.1)' }
                                ]
                            }
                        },
                        data: [120, 132, 145, 156, 168, 172, 165, 156]
                    }]
                };
                dbPerformanceChart.setOption(dbPerformanceOption);
            }

            // 应用性能图表
            if (this.$refs.appPerformanceChart) {
                const appPerformanceChart = echarts.init(this.$refs.appPerformanceChart);
                const appPerformanceOption = {
                    animation: false,
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>{a}: {c} ms'
                    },
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} ms'
                        }
                    },
                    series: [{
                        name: '平均响应时间',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: '#10B981'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0, y: 0, x2: 0, y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(16, 185, 129, 0.3)' },
                                    { offset: 1, color: 'rgba(16, 185, 129, 0.1)' }
                                ]
                            }
                        },
                        data: [110, 120, 135, 142, 125, 118, 125, 130]
                    }]
                };
                appPerformanceChart.setOption(appPerformanceOption);
            }
        },
        // 显示全部告警
        showAllAlerts() {
            this.showAllAlertsModal = true;
        },

        // 获取告警级别样式
        getAlertLevelClass(level) {
            const classes = {
                '严重': 'text-sm font-medium text-red-600 px-2 py-1 bg-red-100 rounded flex items-center',
                '警告': 'text-sm font-medium text-yellow-600 px-2 py-1 bg-yellow-100 rounded flex items-center',
                '信息': 'text-sm font-medium text-blue-600 px-2 py-1 bg-blue-100 rounded flex items-center',
                '恢复': 'text-sm font-medium text-green-600 px-2 py-1 bg-green-100 rounded flex items-center'
            };
            return classes[level] || 'text-sm font-medium text-gray-600 px-2 py-1 bg-gray-100 rounded flex items-center';
        },

        // 获取告警级别图标
        getAlertLevelIcon(level) {
            const icons = {
                '严重': 'fas fa-exclamation-circle',
                '警告': 'fas fa-exclamation-triangle',
                '信息': 'fas fa-info-circle',
                '恢复': 'fas fa-check-circle'
            };
            return icons[level] || 'fas fa-circle';
        },

        // 获取告警值样式
        getAlertValueClass(level) {
            const classes = {
                '严重': 'text-red-600',
                '警告': 'text-yellow-600',
                '信息': 'text-blue-600',
                '恢复': 'text-green-600'
            };
            return classes[level] || 'text-gray-600';
        },

        // 获取告警状态样式
        getAlertStatusClass(status) {
            const classes = {
                '未处理': 'text-xs font-medium text-red-600 px-2 py-1 bg-red-100 rounded',
                '处理中': 'text-xs font-medium text-yellow-600 px-2 py-1 bg-yellow-100 rounded',
                '已处理': 'text-xs font-medium text-green-600 px-2 py-1 bg-green-100 rounded',
                '已恢复': 'text-xs font-medium text-blue-600 px-2 py-1 bg-blue-100 rounded'
            };
            return classes[status] || 'text-xs font-medium text-gray-600 px-2 py-1 bg-gray-100 rounded';
        },

        // 处理告警
        async handleAlert(alert) {
            try {
                await ElMessageBox.confirm(
                    `确定要处理告警 "${alert.title}" 吗？`,
                    '处理告警',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                );

                // 用户确认处理
                alert.status = '处理中';
                this.showMessage(`告警 "${alert.title}" 已开始处理`, 'success');

            } catch (error) {
                if (error !== 'cancel') {
                    this.showMessage('处理告警失败，请稍后重试', 'error');
                }
            }
        },

        // 查看告警详情
        async viewAlertDetail(alert) {
            try {
                await ElMessageBox.alert(
                    `<div style="text-align: left; line-height: 1.6;">
                        <p><strong>标题：</strong>${alert.title}</p>
                        <p><strong>内容：</strong>${alert.content}</p>
                        <p><strong>服务器：</strong>${alert.server}</p>
                        <p><strong>监控指标：</strong>${alert.metric}</p>
                        <p><strong>当前值：</strong>${alert.value}</p>
                        <p><strong>阈值：</strong>${alert.threshold}</p>
                        <p><strong>级别：</strong>${alert.level}</p>
                        <p><strong>状态：</strong>${alert.status}</p>
                        <p><strong>时间：</strong>${alert.time}</p>
                    </div>`,
                    '告警详情',
                    {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '确定',
                    }
                );

                // 用户查看详情后的回调
                alert.status = '已处理';
                this.showMessage('告警状态已更新为已处理', 'success');

            } catch (error) {
            }
        },
        // 导出告警信息
        exportAlerts() {
            try {
                // 准备导出数据
                const exportData = this.allAlerts.map(alert => ({
                    '告警ID': alert.id,
                    '告警级别': alert.level,
                    '服务器': alert.server,
                    '监控指标': alert.metric,
                    '当前值': alert.value,
                    '阈值': alert.threshold,
                    '告警内容': alert.content,
                    '发生时间': alert.time,
                    '处理状态': alert.status
                }));

                // 转换为CSV格式
                const csvContent = this.convertToCSV(exportData);

                // 创建下载链接
                this.downloadCSV(csvContent, `系统告警信息_${this.getCurrentDateTime()}.csv`);

                // 显示成功消息
                this.showMessage('告警信息导出成功！文件已开始下载。', 'success');

            } catch (error) {
                this.showMessage('导出失败，请稍后重试。', 'error');
            }
        },

        // 导出日志信息
        exportLogs() {
            try {
                // 准备导出数据
                const exportData = this.systemLogs.map(log => ({
                    '时间': log.time,
                    '级别': log.level,
                    '来源': log.source,
                    '内容': log.content,
                    '线程': log.thread || 'main-thread-1'
                }));

                // 转换为CSV格式
                const csvContent = this.convertToCSV(exportData);

                // 创建下载链接
                this.downloadCSV(csvContent, `系统日志信息_${this.getCurrentDateTime()}.csv`);

                // 显示成功消息
                this.showMessage('日志信息导出成功！文件已开始下载。', 'success');

            } catch (error) {
                this.showMessage('导出失败，请稍后重试。', 'error');
            }
        },

        // 将数据转换为CSV格式
        convertToCSV(data) {
            if (!data || data.length === 0) return '';

            const headers = Object.keys(data[0]);
            const csvRows = [];

            // 添加表头
            csvRows.push(headers.join(','));

            // 添加数据行
            for (const row of data) {
                const values = headers.map(header => {
                    const value = row[header] || '';
                    // 处理包含逗号、换行符或引号的值
                    const escapedValue = String(value).replace(/"/g, '""');
                    return `"${escapedValue}"`;
                });
                csvRows.push(values.join(','));
            }

            return csvRows.join('\n');
        },

        // 下载CSV文件
        downloadCSV(csvContent, filename) {
            // 创建Blob对象（添加BOM头以支持中文）
            const blob = new Blob(['\uFEFF' + csvContent], {
                type: 'text/csv;charset=utf-8;'
            });

            // 创建下载链接
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);

            link.setAttribute('href', url);
            link.setAttribute('download', filename);
            link.style.visibility = 'hidden';

            // 触发下载
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            // 释放URL对象
            URL.revokeObjectURL(url);
        },

        // 获取当前日期时间（用于文件名）
        getCurrentDateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
        },

        // 显示消息提示
        showMessage(message, type = 'info') {
            switch (type) {
                case 'success':
                    ElMessage.success(message);
                    break;
                case 'error':
                    ElMessage.error(message);
                    break;
                case 'warning':
                    ElMessage.warning(message);
                    break;
                default:
                    ElMessage.info(message);
                    break;
            }
        },

        // 导出为JSON格式（可选功能）
        exportAlertsAsJSON() {
            try {
                const exportData = {
                    exportTime: new Date().toISOString(),
                    total: this.allAlerts.length,
                    alerts: this.allAlerts
                };

                const jsonContent = JSON.stringify(exportData, null, 2);
                const blob = new Blob([jsonContent], { type: 'application/json' });
                const url = URL.createObjectURL(blob);

                const link = document.createElement('a');
                link.href = url;
                link.download = `系统告警信息_${this.getCurrentDateTime()}.json`;
                link.click();

                URL.revokeObjectURL(url);
                this.showMessage('JSON格式告警信息导出成功！', 'success');

            } catch (error) {
                this.showMessage('JSON导出失败，请稍后重试。', 'error');
            }
        },

        // 导出日志为JSON格式
        exportLogsAsJSON() {
            try {
                const exportData = {
                    exportTime: new Date().toISOString(),
                    total: this.systemLogs.length,
                    logs: this.systemLogs
                };

                const jsonContent = JSON.stringify(exportData, null, 2);
                const blob = new Blob([jsonContent], { type: 'application/json' });
                const url = URL.createObjectURL(blob);

                const link = document.createElement('a');
                link.href = url;
                link.download = `系统日志信息_${this.getCurrentDateTime()}.json`;
                link.click();

                URL.revokeObjectURL(url);
                this.showMessage('JSON格式日志信息导出成功！', 'success');

            } catch (error) {
                this.showMessage('日志导出失败，请稍后重试。', 'error');
            }
        },
        toggleMenu(index) {
            this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
            // 如果展开了菜单，则将其他菜单收起
            if (this.mainMenus[index].expanded) {
                this.mainMenus.forEach((menu, i) => {
                    if (i !== index) {
                        menu.expanded = false;
                    }
                });
            }
        },
        selectSubmenu(menuIndex, submenuIndex) {
            // 重置所有菜单的激活状态
            this.mainMenus.forEach(menu => {
                menu.active = false;
                menu.subMenus.forEach(submenu => {
                    submenu.active = false;
                });
            });
            // 设置当前选中的菜单和子菜单为激活状态
            this.mainMenus[menuIndex].active = true;
            this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
        },
        getLogLevelClass(level) {
            const classes = {
                'ERROR': 'text-sm font-medium text-red-600 px-2 py-0.5 bg-red-100 rounded',
                'WARN': 'text-sm font-medium text-yellow-600 px-2 py-0.5 bg-yellow-100 rounded',
                'INFO': 'text-sm font-medium text-blue-600 px-2 py-0.5 bg-blue-100 rounded',
                'DEBUG': 'text-sm font-medium text-gray-600 px-2 py-0.5 bg-gray-100 rounded'
            };
            return classes[level] || 'text-sm font-medium text-gray-600';
        },
        viewLogDetail(log) {
            this.currentLog = log;
            this.showLogDetailModal = true;
        },
    }
};
</script>
<style scoped>
/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 自定义颜色类 */
.bg-teal-100 {
    background-color: #b2f5ea;
}

.text-teal-600 {
    color: #319795;
}

.bg-pink-100 {
    background-color: #fce7f3;
}

.text-pink-600 {
    color: #db2777;
}

.bg-indigo-100 {
    background-color: #e0e7ff;
}

.text-indigo-600 {
    color: #4f46e5;
}
</style>